<template>
	<a-card class="cardImp" :bordered="false" :loading="cardLoading">
		<a-tree
			v-if="treeData.length > 0"
			v-model:expandedKeys="defaultExpandedKeys"
			:tree-data="treeData"
			:field-names="treeFieldNames"
			@select="treeSelect"
		>
		</a-tree>
	</a-card>
	<henhouseSelect ref="henhouseRef" @update:henhouseId="handleHenhouseIdUpdate"/>
	<barnSelectByHenhouse ref="barnSelectRef" @update:barnId="handleBarnIdUpdate"/>
	<div id="testChart"></div>
	<a-button @click="test">test</a-button>
</template>

<script setup="test">
import bizOrgApi from "@/api/biz/bizOrgApi";
import {isEmpty} from "lodash-es";
import FeedStockPieChart from '@/views/index/components/FeedStockPieChart.vue'
import {Line} from "@antv/g2plot";

const treeData = ref([])
const defaultExpandedKeys = ref([])
const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
const cardLoading = ref(true)
const barnSelectRef = ref()
const henhouseRef = ref()

const barnId = ref()

const seriesKey = 'series'
const valueKey = 'value'
let listData = ref([])

const handleBarnIdUpdate = (value) =>{
	barnId.value = value;
}

const handleHenhouseIdUpdate = (id) => {
	// 如果鸡舍id不为空则开启栏舍选择框并将id加入到formData中
	if (id !== undefined) {
		barnSelectRef.value.selectByHenhouseId(id);
		barnSelectRef.value.barnDisable = false;
	}
	else {
		barnSelectRef.value.barnDisable = true;
		barnSelectRef.value.barnId = undefined;
	}
}

const test = () => {
	// const data = {
	// 	barnId : barnId.value
	// }
	// BizChartApi.getEggProAndFeedInpInfo(data)
	// 	.then(resp =>{
	// 		listData.value = resp;
	// 		console.log(listData.value)
	// 		renderLineChart()
	// 	})
	// 	.catch(resp =>{
	// 		console.log(resp)
	// 	})

	renderLineChart()

}

const renderLineChart = () => {
	const rawData = [
		{ date: '2023-12-13', quantity: 0, inputQuantity: 5.00 },
		{ date: '2023-12-15', quantity: 41, inputQuantity: 5.00 },
		{ date: '2023-12-16', quantity: 65, inputQuantity: 16.00 },
		{ date: '2023-12-17', quantity: 16, inputQuantity: 12.00 },
		{ date: '2023-12-18', quantity: 32, inputQuantity: 6.00 },
		{ date: '2023-12-19', quantity: 42, inputQuantity: 4.00 },
	];

	const meta = {
		date: {
			alias: '日期'
		},
		quantity: {
			alias: '产蛋量'
		},
		inputQuantity: {
			alias: '饲料投放量'
		}
	}
	const line = new Line('testChart', {
		data: processData(rawData, ['quantity', 'inputQuantity'], meta),
		padding: 'auto',
		xField: 'date',
		yField: valueKey,
		seriesField: seriesKey,
		appendPadding: [0, 8, 0, 0]
	})

	line.render()
}

const processData = (data, yFields, meta) => {
	const result = []
	data.forEach((d) => {
		yFields.forEach((yField) => {
			const name = meta?.[yField]?.alias || yField
			result.push({ ...d, [seriesKey]: name, [valueKey]: d[yField] })
		})
	})
	return result
}


// 点击树查询
const treeSelect = (selectedKeys) => {
	if (selectedKeys.length > 0) {
		searchFormState.value.parentId = selectedKeys.toString()
	} else {
		delete searchFormState.value.parentId
	}
	table.value.refresh(true)
}

// 加载左侧的树
const loadTreeData = () => {
	bizOrgApi
		.orgTree()
		.then((res) => {
			cardLoading.value = false
			if (res !== null) {
				treeData.value = res
				console.log("treeData:",treeData.value);
				console.log("res",res);
				if (isEmpty(defaultExpandedKeys.value)) {
					// 默认展开2级
					treeData.value.forEach((item) => {
						// 因为0的顶级
						if (item.parentId === '0') {
							defaultExpandedKeys.value.push(item.id)
							// 取到下级ID
							if (item.children) {
								item.children.forEach((items) => {
									defaultExpandedKeys.value.push(items.id)
								})
							}
						}
					})
				}
			}
		})
		.finally(() => {
			cardLoading.value = false
		})
}

loadTreeData();

console.log("treeData2:",treeData.value);
</script>

<style scoped>

</style>
